<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <div id="app"style="background-color:aquamarine;position:absolute;width : 100%;height : 100%;">
        <div >
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple" style="color: rgb(255, 0, 200);text-align: center;font-size:larger;">小洛专属单位转换器</div>
                </el-col>
            </el-row>
        </div>

        <div id="appmm">
           
            <div id="line1">
                <el-divider></el-divider>
            </div>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-input v-model="input1" type="number" placeholder="请输入公制尺寸,cm"></el-input>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                        <el-button type="info">cm(厘米)</el-button>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" @click="cmTo">厘米转英寸</el-button>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-input v-model="input2" :disabled="true" placeholder="等待结果"></el-input>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                        <el-button type="info">inch(英寸)</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div id="line2">
            <el-divider></el-divider>
        </div>
        <div id="appinch">
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-input v-model="input3" type="number" placeholder="请输入英制尺寸,inch"></el-input>
                    </div>
                </el-col>

                <el-col :span="2">
                    <div class="grid-content bg-purple">
                        <el-button type="info">inch(英寸)</el-button>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple">
                        <el-button type="primary" @click="inchTo">英寸转厘米</el-button>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple">
                        <el-input v-model="input4" :disabled="true" placeholder="等待结果"></el-input>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content bg-purple">
                        <el-button type="info">cm(厘米)</el-button>
                    </div>
                </el-col>

            </el-row>
        </div>
    </div>


</body>

</html>

<script>
    // console.log(document.getElementById('abc'));
    var Main = {
        data() {
            return {
                input1: '',
                input2: '',
                input3: '',
                input4: ''
            }
        },
        methods: {
            cmTo() {
                this.input2 = this.input1 / 2.54;
            },
            inchTo() {
                this.input4 = this.input3 * 2.54;
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>